<template>
  <div>
    <div class="main">
      <div class="u4-logo-c">
        <div class="u4-logo"></div>
      </div>
      <div class="login-form-c">
        <div class="title">
          <span>{{$t('注册')}}</span>
        </div>
        <div class="auth-code-img-c" style="margin-top: 0px">
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm" @submit.native.prevent>
            <el-form-item :label="$t('用户名')" prop="nickName" class="el-from-item">
              <el-input type="input" v-model="ruleForm.nickName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label="$t('密码')" prop="pass" class="el-from-item">
              <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label="$t('确认密码')" prop="checkPass" class="el-from-item">
              <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label="$t('邮箱')" prop="email" class="el-from-item">
              <el-input type="input" v-model="ruleForm.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label="$t('验证码')" prop="code">
              <el-input v-model="ruleForm.code" style="position: relative; background: #ddd"></el-input>
              <div class="vercode-mask" style="margin-top: 10px;">
                <img v-show="imgShow" :src="vercodeImgSrc" @click="refVercode()" />
                <div class="vercode-mask" v-show="isOverdue" @click="refVercode()">{{$t('已过期_请刷新')}}</div>
              </div>
            </el-form-item>
            <el-form-item style="margin-top: 10px; display: flex; justify-content: space-between;">
              <el-button type="primary" native-type="submit" @click="submitForm('ruleForm')">{{$t('注册')}}</el-button>
              <el-button type="" @click="toLogin()">{{$t('去登录')}}</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import apiService from '@/api/apiService';
import Vue from "vue";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Register",
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error(this.$t('验证码不能为空')));
      } else {
        callback();
      }
    };
    var checkEmail = (rule, value, callback) => {
      const emailRegex = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,4})+$/;
      if (!value) {
        return callback(new Error(this.$t('邮箱不能为空')));
      } else if (!emailRegex.test(value)) {
        return callback(new Error(this.$t('邮箱格式不正确')));
      } else {
        callback();
      }
    };
    var validateNickName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(this.$t('请输入用户名')));
      } else if (value.length > 12) {
        callback(new Error(this.$t('用户名长度不能超过12')));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(this.$t('请输入密码')));
      } else if (value.length < 8) {
        callback(new Error(this.$t('密码长度不能低于8位')));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(this.$t('请再次输入密码')));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error(this.$t('两次输入密码不一致!')));
      } else {
        callback();
      }
    };
    return {
      vercodeImgSrc: '', // 验证码图片
      vercodeToken: '', // 验证码验证token
      isOverdue: false,
      imgShow: false,
      ruleForm: {
        nickName: '',
        pass: '',
        checkPass: '',
        email: '',
        code: ''
      },
      rules: {
        nickName: [
          { validator: validateNickName, trigger: 'blur' }
        ],
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        code: [
          { validator: checkAge, trigger: 'blur' }
        ],
        email: [
          { validator: checkEmail, trigger: 'blur' }
        ]
      }
    };
  },
  mounted() {
    this.refVercode();
  },
  methods: {
    refVercode() { // 刷新图片验证码
      const that = this;
      apiService.get("/code").then(res => {
        that.vercodeImgSrc = res.data.imageBase64Data;
        that.vercodeToken = res.data.vercodeToken;
        this.imgShow = true;
        this.isOverdue = false;
        if (this.timer) clearInterval(this.timer); // 如果多次点击则清除已有的定时器
        // 超过60秒提示过期刷新
        this.timer = setInterval(() => {
          res.data.expireTime--;
          if (res.data.expireTime <= 0) {
            that.isOverdue = true;
            this.imgShow = false;
            clearInterval(this.timer);
          }
        }, 1000);
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const query = {
            nickName: this.ruleForm.nickName,
            pass: this.ruleForm.pass,
            email: this.ruleForm.email,
            code: this.ruleForm.code,
            codeToken: this.vercodeToken
          };
          apiService.post('/register', query).then(res => {
            if (res.code === 0) {
              const mail = this.maskEmail(this.ruleForm.email);
              this.$router.push({ path: '/mailRegister', query: { userKey: res.data.userKey, mailKey: res.data.mailKey, mail: mail } });
            } else {
              Vue.prototype.$message.error(res.msg);
              this.ruleForm.code = '';
              this.refVercode();
            }
          });
        } else {
          Vue.prototype.$message.error(this.$t('提交失败，请重试！'));
          return false;
        }
      });
    },
    maskEmail(email) {
      return email.replace(/(\w{2})\w+(@\w+)/, "$1**$2");
    },
    toLogin() {
      this.$router.push({ name: 'login' });
    }
  },
  computed: {}
};
</script>
<style lang="css" scoped>
.main {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(#c6c6c6, #7af3fd);
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-form-c {
  box-shadow: 0 0 0 .2rem #00000005;
  position: relative;
  width: 700px;
  height: 620px;
  border-radius: 10px;
  background: linear-gradient(#7af3fd, #f6f5f5);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.title {
  color: white;
  font-weight: bolder;
  font-size: 25px;
  margin-top: 20px;
}

.auth-code-img-c {
  margin: 20px auto 0 auto;
  width: 50%;
  text-align: center;
}

.auth-code-img {
  margin-top: 10px;
  width: 100%;
  user-select: none;
}

.error-get {
  width: 100%;
  height: 100%;
  background-color: rgba(250, 250, 250, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.refresh {
  border-radius: 50%;
  background-image: url('@/assets/refresh.svg');
  background-size: contain;
  width: 60px;
  height: 60px;
  margin: 100px auto auto;
}

.u4-logo-c {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.u4-logo {
  width: 500px;
  height: 500px;
  background-size: contain;
  background-image: url('@/assets/u4-logo.png');
}

.refresh:hover {
  cursor: pointer;
  display: inherit;
}

.vercode-mask {
  width: 137px;
  height: 40px;
  background: #000;
  opacity: 0.8;
  text-align: center;
  line-height: 40px;
  color: #fff;
  margin-top: 10px;
}

.el-from-item {
  margin-bottom: 7px;
}

.el-button {
  flex: 1;
  min-width: 100px;
  margin: 0 5px;
}

@media (max-width: 768px) {
  .login-form-c {
    width: 100%;
    height: auto;
    padding: 20px;
  }

  .auth-code-img-c {
    width: 100%;
  }

  .u4-logo-c {
    display: none;
  }

  .auth-code-img {
    max-width: 100%;
  }

  .refresh {
    margin: 20px auto auto;
  }

  .el-form-item {
    margin-bottom: 15px;
  }

  .el-button {
    width: 100%;
    margin: 5px 0;
  }
}
</style>